<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Rotation Raster</title>
    <link rel="stylesheet" href="../css/style.css">
    <script type="text/javascript" src="../../dist/paper-full.js"></script>
    <script type="text/paperscript" canvas="canvas">
        var raster = new Raster('marilyn');
        var size = new Size(50, 50);
        var colSize = raster.size / size * 1.5;
        var fullSize = size * colSize;

        raster.visible = false;
        raster.size = size;
        for (var x = 0; x < size.width; x++) {
            for (var y = 0; y < size.height; y++) {
                var color = raster.getPixel(x, y);
                var gray = (1 - color.gray) * 0.9;
                if (gray > 0.1) {
                    var pos = new Point(x, y) * colSize + colSize / 2;
                    var rectSize = gray * colSize.width;
                    var path = new Path.Rectangle({
                        size: [rectSize, rectSize],
                        position: pos,
                        fillColor: 'black'
                    });
                    path.rotate(gray * 180);
                }
            }
        }
        project.activeLayer.position = view.center;

        // Reposition the paths whenever the window is resized:
        function onResize(event) {
            project.activeLayer.position = view.center;
        }
    </script>
</head>
<body>
    <canvas id="canvas" resize></canvas>
    <img id="marilyn" width="512" height="512" style="display: none;" src=""/>
</body>
</html>
